<template>
  <div class="apply-form">
    <div class="header">
      <van-icon name="arrow-left" class="back-icon" @click="goBack"/>
      <h2 style="margin: auto">申请技师</h2>
    </div>
    <!-- 表单内容 -->
    <van-form @submit="onSubmit" :validation-schema="schema">
      <van-field v-model="name" name="name" label="姓名" placeholder="请填写您的姓名" required />
      <van-field v-model="phone" name="phone" label="电话" placeholder="请填写您的联系电话" type="tel" required />
      <van-field v-model="age" name="age" label="年龄" placeholder="请填写您的真实年龄" type="number" required />


      <!-- 城市选择按钮 -->
      <van-field readonly clickable :value="city || '请选择城市'" label="城市" placeholder="请选择城市"
                 @click="showPopup = true"/>

      <!-- 弹窗 -->
      <van-popup v-model:show="showPopup" position="bottom">
        <van-picker
            show-toolbar
            :columns="cityColumns"
            @confirm="onConfirmCity"
            @cancel="showPopup = false"
        />
      </van-popup>

      <van-field label="性别">
        <template #input>
          <van-radio-group v-model="gender">
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-uploader v-model="photos" multiple max-count="4"/>
      <van-button round block type="primary" native-type="submit">提交申请</van-button>
    </van-form>
  </div>
</template>


<script>
import {ref} from 'vue';
import {Button, Cell, List, NavBar, Icon, Form, Field, RadioGroup, Radio, Uploader, Picker, Popup} from 'vant';
import {useRouter} from 'vue-router';

export default {
  components: {
    [Button.name]: Button,
    [Cell.name]: Cell,
    [List.name]: List,
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Form.name]: Form,
    [Field.name]: Field,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Uploader.name]: Uploader,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
  },
  data() {
    return {
      name: '',
      phone: '',
      age: '',
      city: '',
      gender: '男',
      photos: [],
      schema: {
        name: [{required: true, message: '姓名不能为空'}],
        phone: [{required: true, message: '电话不能为空'}],
        age: [{required: true, message: '年龄不能为空'}]
      },
      cityColumns: [],
      showPopup: false,
    };
  },
  created() {
    this.initCityColumns();
  },
  methods: {
    onConfirmCity(value) {
      this.city = `${value[0]} ${value[1]} ${value[2]}`;
      this.showPopup = false;
    },
    goBack() {
      this.$router.go(-1);
    },
    initCityColumns() {
      const provinces = [
        {value: '北京', children: [{value: '北京市', children: [{value: '东城区'}]}]},
        {value: '上海', children: [{value: '上海市', children: [{value: '黄浦区'}]}]},
        // 更多省份...
      ];
      this.cityColumns = provinces.map(province => ({
        text: province.value,
        children: province.children.map(city => ({
          text: city.value,
          children: city.children.map(district => ({
            text: district.value
          }))
        }))
      }));
    },
    onSubmit(values) {
      console.log('Form submitted:', values);
    }
  }
};
</script>


<style scoped>
.apply-form {
  padding: 10px;
}

.back-icon {
  font-size: 20px;
  cursor: pointer;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
  width: 100%; /* 占满父元素宽度 */
}
</style>
